<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .p{
            width: 1519px;
            height: 600px;
            margin: auto;
        }
   .header{
       height: 60px;
       width: 1519px;
          }
   .header a{
       height: 60px;
       width: 497px;
       padding: 0px 0px 0px 24px;
       text-decoration: none;
       color: #222;
   }
   .header li{
       margin-top: -19px;
       margin-left: 32px;
       float: right;
   }
   .header p{
       border-radius: 4px;
       background: #4e6ef2;
       height: 24px;
       width: 38px;
       color: #fff;
   }
   .con{
       height: 188px;
       width: 654px;
       margin: auto;
       position: relative;
   }
   .con img{
       height: 129px;
       width: 270px;
   }
   .a{
    text-align: center;
   }
   .head{
       position: relative;
       width: 665px;
       height: 44px;
       border: #cccccc 2px solid;
       border-radius: 10px;
       margin: auto;
       margin-top: -55px;
       vertical-align: top;
   }
   .head img{
       width: 24px;
       height: 20px;
       float: right;
       background: #fff url(images/log2.png) no-repeat;
   }
   .a1{
       height: 44px;
       width: 108px;
       background: #4e6ef2;
       float: right;
       border-radius: 10px;
       
   }
   .a1 p{
       margin:10px 22px ;
       color: #fff;
   }
   .a1 a{
       text-decoration: none;
   }
  .wa{
      height: 24px;
      width: 654px;
   /*   background: rosybrown;*/
      margin: auto;
      margin-top: 30px;
  }
   .wa p{
       height: 24px;
       width: 64px;
       float: left;
       color:#222222;
   }
   .wa a{
       height: 14px;
       width: 48px;
       float: right;
       color: #9195a3;
       text-decoration: none;
   }
   .wa1{
       width: 654px;
       height: 150px;
    /* background: #4e6ef2;*/
       margin:auto ;
       margin-top: 20px;
   }
   .wa1 li{
       height: 4px;
       width: 324px;
       margin-top: 31px;
       float: left;
       color: #222222;
   }
   .wa1 p{
       float: right;
       height: 3px;
       width: 327px;
       margin-top: 30px;
       color: #222222;
   }
   .ww{
       height: 35px;
       width: 1519px;
       margin-top: 350px;
   /*    background: #9195a3;*/
       text-align: center;
      
   }
   .ww li{
       float: left;
       color: #bbbbbb;
       height: 13px;
       width: 210px;
       margin-left: 2px;
       margin: auto;
   }
    </style>
    <body>
        <div class="p">
    <div class="header">
            <a href="">新闻</a>
            <a href="">hao123</a>
            <a href="">地图</a>
            <a href="">直播</a>
            <a href="">视频</a>
            <a href="">贴吧</a>
            <a href="">学术</a>
            <a href="">更多</a>
            <ul>
             <li> <p>登录</p>  </li>
                <li>设置</li>
            </ul>
    </div>
    <div class="con">
        <div class="a">
        <img src="images/log.png" alt=""></div>
    </div>
    <div class="head">
        <div class="a1">
            <a href=""><p>百度一下</p></a>
        </div> 
    </div>
        <div class="wa">
            <p>百度热榜</p>
            <a href="">换一换</a>
        </div>
 <div class="wa1">
     <ul>
         <li>1.乘风破浪的姐姐2成团</li>
         <li>2.中方决定对冰岛有关人员实施制裁</li>
         <li>3.炫富网红郭美美被批捕</li></ul>
         <p> 4.一季度经济还要关注啥?专家解读</p> 
         <p>5.5月1日起遛狗不拴绳违法</p>
         <p>6.水滴公司提交IPO申请</p>
    
 </div>
 <div class="ww">
     <ul>
        <li>设为首页</li>
        <li>关于百度</li>
        <li>about baidu</li>
        <li>百度营销</li>
        <li>使用百度前必读</li>
        <li>意见反馈</li>
        <li>帮助中心</li>
         
     </ul>
 </div>
    </div>
</body>
</html>